import 'package:flutter/material.dart';

import 'res/listData.dart';

void main() => runApp(Home());

class Home extends StatelessWidget {
  List<Widget> _getListData() {
    var tempList = listData.map((item) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(item['imageUrl']),
            SizedBox(height: 10),
            Text(item['title']),
          ],
        ),
      );
    });

    return tempList.toList();
  }

  Widget _getListGridData(context, index) {
    var item = listData[index];
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(item['imageUrl']),
          SizedBox(height: 10),
          Text(item['title']),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter"),
        ),
        body: WrapComp(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }

  GridView buildGridViewComp() {
    return GridView.builder(
      itemCount: listData.length,
      itemBuilder: this._getListGridData,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
      ),
    );
  }

  GridView buildGridView() {
    return GridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
      padding: EdgeInsets.all(10),
      children: this._getListData(),
    );
  }
}

class WrapComp extends StatelessWidget {
  const WrapComp({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.amber,
      child: Wrap(
        spacing: 10,
        runSpacing: 10,
        alignment: WrapAlignment.center,
        runAlignment: WrapAlignment.spaceEvenly,
        direction: Axis.vertical,
        children: <Widget>[
          MyRaisedButton("你猪1"),
          MyRaisedButton("你猪2"),
          MyRaisedButton("你猪3"),
          MyRaisedButton("你猪4"),
          MyRaisedButton("你猪5"),
          MyRaisedButton("你猪6"),
          MyRaisedButton("你猪7"),
          MyRaisedButton("你猪8"),
          MyRaisedButton("你猪9"),
          MyRaisedButton("你猪0"),
          MyRaisedButton("你猪1"),
          MyRaisedButton("你猪2"),
          MyRaisedButton("你猪3"),
          MyRaisedButton("你猪4"),
          MyRaisedButton("你猪5"),
          MyRaisedButton("你猪6"),
          MyRaisedButton("你猪7"),
          MyRaisedButton("你猪8"),
          MyRaisedButton("你猪9"),
          MyRaisedButton("你猪0"),
        ],
      ),
    );
  }
}

class MyRaisedButton extends StatelessWidget {
  final String text;
  const MyRaisedButton(
    this.text, {
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).bottomAppBarColor,
      onPressed: () {},
    );
  }
}

class CardComp extends StatelessWidget {
  const CardComp({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: listData.map((item) {
        return Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  item['imageUrl'],
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(item['imageUrl']),
                ),
                title: Text(item['title']),
                subtitle: Text(
                  item['author'],
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                ),
              ),
            ],
          ),
        );
      }).toList(),
    );
  }
}

class StackComp extends StatelessWidget {
  const StackComp({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 500,
        height: 400,
        color: Colors.amberAccent,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.bottomCenter,
              child: Icon(Icons.ac_unit),
            ),
            Positioned(
              left: 10,
              top: 10,
              child: Icon(Icons.access_alarm),
            ),
          ],
        ),
      ),
    );
  }
}

class ExpandedComp extends StatelessWidget {
  const ExpandedComp({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      width: 400,
      color: Colors.pink,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          Expanded(
            child: IcomComp(
              Icons.ac_unit,
              color: Colors.green,
            ),
            flex: 1,
          ),
          IcomComp(
            Icons.access_alarm,
            color: Colors.blueAccent,
          ),
          IcomComp(
            Icons.accessibility,
            color: Colors.amberAccent,
          ),
        ],
      ),
    );
  }
}

class IcomComp extends StatelessWidget {
  IconData icons;
  double size = 30;
  Color color = Colors.red;

  IcomComp(this.icons, {this.size, this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: this.color,
      child: Icon(
        this.icons,
        size: this.size,
        color: Colors.white,
      ),
    );
  }
}

class ListViewBuilder extends StatelessWidget {
  const ListViewBuilder({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: listData.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(listData[index]['title']),
          subtitle: Text(listData[index]['author']),
          leading: Image.network(listData[index]['imageUrl']),
        );
      },
    );
  }
}

class BodyComp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Center(
          child: Text(
            '中国中国中国中国中国中国中国中国中国中国中国中国',
            textDirection: TextDirection.ltr,
            style: TextStyle(
              fontSize: 40,
              color: Colors.white,
              fontWeight: FontWeight.w400,
              fontStyle: FontStyle.normal,
              decoration: TextDecoration.underline,
              decorationColor: Colors.deepPurple,
              decorationStyle: TextDecorationStyle.dotted,
              letterSpacing: 1.2,
            ),
            textAlign: TextAlign.justify,
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
            textScaleFactor: 0.8,
          ),
        ),
        width: 300,
        height: 300,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
            color: Colors.yellow,
            border: Border.all(
              color: Colors.purple,
            )),
        padding: EdgeInsets.only(
          left: 10,
        ),
        alignment: Alignment.topLeft,
        transform: Matrix4.translationValues(10, 10, 0));
  }
}

class ImageComp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      alignment: Alignment.bottomRight,
      decoration: BoxDecoration(
          color: Colors.yellow,
          image: DecorationImage(
            image:
                NetworkImage('https://portrait.gitee.com/uploads/avatars/user/699/2097669_wuchunwang_1615184549.png'),
            fit: BoxFit.cover,
          )),
      child: AssetsImageComp(),
      // Image.network(
      //   'https://portrait.gitee.com/uploads/avatars/user/699/2097669_wuchunwang_1615184549.png',
      //   color: Colors.purple,
      //   colorBlendMode: BlendMode.plus,
      //   fit: BoxFit.contain,
      // ),
    );
  }
}

class ClipOvalComp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ClipOval(
        child: Image.network('https://portrait.gitee.com/uploads/avatars/user/699/2097669_wuchunwang_1615184549.png'),
      ),
    );
  }
}

class AssetsImageComp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.asset('images/abcdefg.webp'),
    );
  }
}

class ListViewComp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      child: HorizontalComp(),
    );
  }
}

class HorizontalComp extends StatelessWidget {
  const HorizontalComp({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        ImageItem(),
        ImageItem(),
        ImageItem(),
        ImageItem(),
        ImageItem(),
        ImageItem(),
      ],
    );
  }
}

class ImageItem extends StatelessWidget {
  const ImageItem({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      child: Image.network(
          "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a38610e87774d718ef6633d80b48409~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"),
    );
  }
}

class ListTileComp extends StatelessWidget {
  const ListTileComp({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text("11+ chrome高级调试技巧，学会效率直接提升666%"),
      subtitle: Text("也许你我素未谋面，但很可能相见恨晚，我是前端胖头鱼"),
      leading: Image.network(
          "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a38610e87774d718ef6633d80b48409~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"),
    );
  }
}
